<template>
  <div>
    <el-form :model="ruleForm"
             ref="formRef"
             :label-width="'100px'"
             class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="最高学历:" prop="education">
            <el-select v-model="ruleForm.education" clearable placeholder="请选择最高学历" style="width: 100%">
              <el-option label="小学" value="PRIMARYSCHOOL"></el-option>
              <el-option label="初中" value="JUNIORSCHOOL"></el-option>
              <el-option label="高中" value="HIGHSCHOOL"></el-option>
              <el-option label="专科" value="COLLEGEDEGREE"></el-option>
              <el-option label="本科" value="BACHELOR"></el-option>
              <el-option label="硕士" value="MASTER"></el-option>
              <el-option label="博士" value="DOCTOR"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="上级主管:" prop="upManage">
            <el-select clearable v-model="ruleForm.upManage" placeholder="请选择上级主管" style="width: 100%">
              <el-option v-for="item in upManageOptions" :key="item.baseUserId.uname" :label="item.baseUserId.realName" :value="item.baseUserId.uname"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="社保公司:" prop="socialUnitChild">
            <el-select @change="handleChild" clearable filterable v-model="ruleForm.socialUnitChild" placeholder="公司"
                       style="width: 50%">
              <el-option v-for="item in socialUnitChildOptions" :key="item.id" :label="item.companyName"
                         :value="item.id"></el-option>
            </el-select>
            <el-select @change="handleCustomer" clearable filterable v-model="ruleForm.socialUnitCustomer"
                       placeholder="挂靠公司" style="width: 50%">
              <el-option v-for="item in socialUnitCustomerOptions" :key="item.id" :label="item.unitName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买时间:" prop="buySocialTime">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.buySocialTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="家庭住址:" prop="homeAddress">
            <el-input clearable @focus="showMap" style="width: 100%" v-model="ruleForm.homeAddress"
                      placeholder="请选择家庭住址"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="其他备注:" prop="otherNote">
            <el-input maxlength="200"
                      type="textarea"
                      clearable
                      show-word-limit style="width: 100%" v-model="ruleForm.otherNote" placeholder="其他备注"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账户余额:" prop="lookBtlBalance">
            <el-radio-group v-model="ruleForm.lookBtlBalance">
              <el-radio :label="1">能查看</el-radio>
              <el-radio :label="0">不能查看</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="其他证件:"
            prop="serviceType"
            label-width="120px">
            <UploadImg
              style="display: inline-block;margin-left: 20px"
              imgName="otherPaperUrl1"
              @getImgUrl="setImgUrl"
              :url="'/company/upload'"
              :ps="{ userName: uname }"
            />
            <UploadImg
              style="display: inline-block;margin-left: 20px"
              imgName="otherPaperUrl2"
              @getImgUrl="setImgUrl"
              :url="'/company/upload'"
              :ps="{ userName: uname }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <tp-amap
        style="height: 400px;z-index: 99"
        v-if="isShowMap"
        :state="isShowMap"
        @getMdState="getAmapState"
        @getMapData="getMapData"
    />
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import { getCompanyDict, getStaffCombo} from "@/api/services/common.service";
import {getCompanyCusIsDependData} from "@/api/services/logistics.service";
import TpAmap from "@/views/tpls/tp-amap";
import UploadImg from '@/components/UploadImg';


export default {
  name: "OtherFrom",
  components: {TpAmap, UploadImg},
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },
  data() {
    return {
      isShowMap: false,
      ruleForm: {
        education: '',// 学历
        upManage: '',  // 上级主管
        lookBtlBalance: 0, // 查看银行帐余额
        socialUnitChild: '', // 社保单位子公司
        socialUnitCustomer: '', // 社保单位挂靠客户
        buySocialTime: '', // 购买社保时间
        homeAddress: '', //家庭住址全称
        homeLatLon: '', //家庭住址经纬度
        otherNote: '', // 备注
        otherPaperUrl: '', // 其他证件
        otherPaperUrl1: '',
        otherPaperUrl2: '',
      },
      departmentOptions: [],
      roleOptions: [],
      upManageOptions: [],
      socialUnitChildOptions: [],
      socialUnitCustomerOptions: []
    }
  },
  created() {
    // 上级主管
    getStaffCombo({isContainDriver: 1}).then(res => {
      this.upManageOptions = res.data
    })
    getCompanyDict().then(res => {
      this.socialUnitChildOptions = res.data
    })
    getCompanyCusIsDependData({unitNum: this.lunitNum}).then(res => {
      this.socialUnitCustomerOptions = res.data
    })
  },
  methods: {
    getSource() {
      this.ruleForm.otherPaperUrl = [this.ruleForm.otherPaperUrl1, this.ruleForm.otherPaperUrl2].join(',')
      return this.ruleForm
    },
    // 验证
    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate((valid) => {
          resolve(valid)
        })
      })
    },
    resetFields() {
      this.$refs.formRef.resetFields();
    },
    showMap() {
      this.isShowMap = true;
    },
    getAmapState(e) {
      this.isShowMap = e;
    },
    getMapData(e) {
      if (!e) return;
      const {address, lng, lat} = e;
      this.ruleForm.homeAddress = address
      this.ruleForm.homeLatLon = `${lng},${lat}`;
      this.isShowMap = false;
    },
    handleChild() {
      this.ruleForm.socialUnitCustomer = ''
    },
    handleCustomer() {
      this.ruleForm.socialUnitChild = ''
    },
    setImgUrl(data) {
      if (data.name === 'otherPaperUrl1') {
        this.ruleForm.otherPaperUrl1 = data.url;
      }
      if (data.name === 'otherPaperUrl2') {
        this.ruleForm.otherPaperUrl2 = data.url;
      }
    }
  }
}
</script>

<style scoped>

</style>